import React, { useState } from 'react'
import PropTypes from 'prop-types'
import FileSearch from './FileSearch'
import FileFloder from './FileFloder'
import FileOperation from './FileOperation'
import '@/style/sider/sider.scss'
import FreeScrollBar from 'react-free-scrollbar';
import FileItem from './FileItem'
import useContextMenu from 'hooks/useContextMenu';
import { getParentNode } from 'utils/helper';

FileSearch.propTypes = {
    title: PropTypes.string,
    onFileSearch: PropTypes.func.isRequired,
}

const fileOperationList = [
    {
        title: '新建',
        icon: 'iconxinjian'
    },
    {
        title: '导入',
        icon: 'icondaoru'
    }
]

export default function Sider({ files, onFileClick, fileSearch, createNewFile, updateFIleName, importFiles, deleteFile, removeFile }) {
    const [editID, setEditID] = useState(null)
    // 添加上下文菜单
    const clickedItem = useContextMenu([
        {
            label: '打开',
            click: () => {
                const parentElement = getParentNode(clickedItem.current, 'fileItem')
                if (parentElement) {
                    onFileClick(parentElement.dataset.id);
                }
            }
        },
        {
            label: '重命名',
            click: () => {
                const parentElement = getParentNode(clickedItem.current, 'fileItem')
                if (parentElement) {
                    setEditID(parentElement.dataset.id)
                }
            }
        },
        {
            label: '删除',
            click: () => {
                const parentElement = getParentNode(clickedItem.current, 'fileItem')
                if (parentElement) {
                    deleteFile(parentElement.dataset.id)
                }
            }
        },
        {
            label: '移除',
            click: () => {
                const parentElement = getParentNode(clickedItem.current, 'fileItem')
                if (parentElement) {
                    removeFile(parentElement.dataset.id)
                }
            }
        }
    ], '.fileList')
    return (
        <div className='sider'>
            <FileSearch
                title='我的云文档'
                onFileSearch={fileSearch}
            />
            <div className='fileList'>
                <FreeScrollBar>
                    <FileFloder />
                    {
                        files.map((item) => {
                            return <FileItem
                                padding={10}
                                key={item.id}
                                file={item}
                                updateFIleName={updateFIleName}
                                onFileClick={onFileClick}
                                editID={editID}
                                setEditID={setEditID}
                            />
                        })
                    }
                </FreeScrollBar>
            </div>
            <div className='fileOperation'>
                {
                    fileOperationList.map((item, index) => {
                        return <FileOperation
                            item={item}
                            index={index}
                            key={index}
                            createNewFile={createNewFile}
                            importFiles={importFiles}
                        />
                    })
                }
            </div>
        </div>
    )
}
